<template>
	<view class="order_box">
		<view class="order_bg"></view>
		<view v-if="detail" class="order_body">
			<view class="flex_box item_center order_status flex_row_center">
				<view class="title">票务核销</view>
				<!-- <image class="order_status_img" :src="'/static/status'+detail.state+'.png'"></image> -->
				<!-- <view>{{statusText[detail.state]}}</view> -->
			</view>
			<!-- <view class="order_line"></view> -->
			<view class="order_main">
				<image src="/static/jqbg.png"></image>
				<view class="order_content">
					<view class="flex_box item_center order_header">
						<u-image :src="detail.tyscenic.image" width="160rpx" height="160rpx" radius="16rpx"/>
						<view class="flex_box flex_direction">
							<view class="order_title text_hidden">{{detail.tyscenic.title}}</view>
							<view class="flex_box item_center view_option flex_wrap">
								<view class="view_option_item">{{detail.tyscenic.category_name}}</view>
								<view class="view_option_item" :class="'view_option_item'+index" v-for="(item,index) in detail.flaglist" :key="index">{{item.name}}</view>
								<template v-for="(val, index) in detail.tyscenic.cardtype">
									<view class="cardtype flex_box" :class="'cardtype' + val">
										<image src="/static/mine/icon1.png" class="typetagimg"></image>
										<view>{{ val == 1? '黄金版' : '豪华版' }}</view>
									</view>
								</template>
							</view>
						</view>
					</view>
					<view class="line"></view>
					<view class="flex_box flex_row_between order_card">
						<view class="card_title">{{ detail.card.card_cn }}</view>
						<view class="pass">{{statusText[detail.state]}}</view>
					</view>
					<view class="line"></view>
					<view class="flex_box flex_row_between order_card">
						<view class="card_title">{{ detail.username }}</view>
						<view class="time">{{ detail.createTime }}</view>
					</view>
					<view class="line"></view>
					<view class="flex_box flex_row_between order_card">
						<view class="order_location flex_box">
							<image class="order_location_img" src="/static/location.png"></image>
							<view>{{detail.tyscenic.city}}{{detail.tyscenic.area}}{{detail.tyscenic.details}}</view>
						</view>
						<view class="dis">距您{{ detail.distances }}</view>
					</view>
					<view class="method flex_box flex_row_center flex_direction">
						<view>入园方式</view>
						<u-image :src="detail.image" width="240rpx" height="240rpx" radius="24rpx">请在5公里 范围内打开</u-image>
					</view>
					<view class="flex_box flex_row_between footer_box">
						<view class="goHome" @click="goHome">回到首页</view>
						<view class="navigation">立即导航</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getT} from "@/common/js/public.js";
	import {
		JqOrderDetail
	} from '@/common/http.api.js';
	export default {
		data() {
			return {
				statusText: ["待审核","已通过","已拒绝","已取消"],
				id: "",
				lng: "",
				lat: "",
				detail: null
			}
		},
		onLoad(options) {
			let that = this
			if(options.id) that.id = options.id
		},
		onShow() {
			let that = this
			that.getAddress()
		},
		methods: {
			// 获取位置
			getAddress: function() {
				var that = this;
				uni.getLocation({
					type: 'gcj02',
					success: function(t) {
						console.log(t)
						that.lng = t.longitude, that.lat = t.latitude, that.getDetail()
					},
					fail() {
						that.Toast('获取位置信息失败，请开启GPS定位')
					}
				});
			},
			// 获取预约详情
			getDetail(){
				let that = this
				JqOrderDetail({params:{order_id: that.id,lng: that.lng,lat: that.lat}}).then(res => {
					console.log(res)
					let detail = res.data
					detail.createTime = getT(detail.activitytime*1000)
					detail.canshow = !1;
					let dates = detail.createTime.split("-")
					let nowTime = new Date().getTime();
					let thisTime = new Date(dates[0],parseInt(dates[1])-1,dates[2],"07","00","00").getTime();
					if(nowTime>thisTime) detail.canshow = !0;
					that.detail = detail
				}).catch(err => {
					console.log(err)
				})
			},
			// 导航
			seeLoaction(e){
				let that = this
				uni.openLocation({
					latitude: that.detail.tyscenic.lat,
					longitude: that.detail.tyscenic.lng,
					name: that.detail.tyscenic.title,
					address: that.detail.tyscenic.province+that.detail.tyscenic.city+that.detail.tyscenic.area+that.detail.tyscenic.details
				})
			},
			// 取消预约
			cancelOrder(e){
				let that = this
				uni.showModal({
					title: '',
					content: '确定取消该预约吗？',
					confirmColor: '#FF0000',
					confirmText: '取消',
					cancelColor: '#999999',
					cancelText: '我再想想',
					success(resl) {
						if(resl.confirm){
							that.$http.get('Order/cancel',{id: that.id}).then(res => {
								console.log(res)
								that.Toast('取消成功',!0),that.detail.state = 3
							}).catch(err => {
								console.log(err)
							})
						}
					}
				})
			},
			goHome () {
				uni.switchTab({
					url: "/pages/home/index/index"
				})
			}
		}
	}
</script>

<style>
	@import url("@/common/css/orderDetail.css");
</style>
